<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input placeholder="搜索内容" style="width: 200px;" size="mini" class="filter-item" />
      <el-button class="filter-item" type="success" size="mini" icon="el-icon-search">搜索</el-button>
    </div>
    <div class="filter-container" style="display: flex;justify-content: space-between;">
      <el-button-group>
        <el-button v-permission="['admin','menu:add']" class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
        <el-button v-permission="['admin','menu:edit']" class="filter-item" size="mini" type="success" icon="el-icon-edit" @click="handleUpdate()">修改</el-button>
        <el-button v-permission="['admin','menu:delete']" class="filter-item" size="mini" type="danger" icon="el-icon-delete">删除</el-button>
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-download">导出</el-button>
      </el-button-group>
      <el-button-group>
        <el-button class="filter-item" size="mini" plain type="info" icon="el-icon-search" />
        <el-button class="filter-item" size="mini" icon="el-icon-refresh" @click="refresh()" />
      </el-button-group>
    </div>
    <el-table
      v-loading="loading"
      :data="menuData"
      style="width: 100%"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="title" label="菜单名称" width="150" :show-overflow-tooltip="true" />
      <el-table-column prop="icon" label="图标" align="center" width="60px">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="80" />
      <el-table-column prop="path" label="路径" />
      <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
      <el-table-column prop="link" label="外链" width="75px">
        <template slot-scope="scope">
          <span v-if="scope.row.is_link == 2">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column prop="is_cache" label="缓存" width="75px">
        <template slot-scope="scope">
          <span v-if="scope.row.is_cache == 2">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column prop="is_show" label="可见" width="75px">
        <template slot-scope="scope">
          <span v-if="scope.row.is_show == 2">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column v-permission="['admin','menu:edit','menu:delete']" label="操作" align="center" width="120" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button v-permission="['admin','menu:edit']" type="primary" size="mini" icon="el-icon-edit" style="width: auto;" @click="handleUpdate(row)" />
          <el-button v-permission="['admin','menu:delete']" size="mini" type="danger" icon="el-icon-delete" style="width: auto;" @click="handleDelete(row,$index)" />
        </template>
      </el-table-column>
    </el-table>

    <!--表单渲染-->
    <el-dialog :visible.sync="formVisible" append-to-body :title="formStatus.title" width="600px">
      <el-form ref="form" :rules="rules" :inline="true" :model="form" size="small" label-width="80px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单类型" prop="type">
              <el-radio-group v-model="form.type" size="mini" style="width: 178px">
                <el-radio-button label="1">目录</el-radio-button>
                <el-radio-button label="2">菜单</el-radio-button>
                <el-radio-button label="3">按钮</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-show="form.type.toString() !== '3'" label="菜单图标" prop="icon">
              <el-popover
                placement="bottom-end"
                width="464"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <IconSelect ref="iconSelect" @selected="selectedIcon" />
                <el-input slot="reference" v-model="form.icon" style="width: 184px;" placeholder="点击选择图标" readonly>
                  <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单标题" prop="title">
              <el-input v-model="form.title" placeholder="菜单标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.type.toString() !== '3'" label="路由地址" prop="router">
              <el-input v-model="form.router" placeholder="路由地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-show="(form.type == 2 && form.is_link == 2 ) || form.type == 3" label="权限标识" prop="auth_sign">
              <el-input v-model="form.auth_sign" placeholder="权限标识" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单排序" prop="sort">
              <el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 184px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item v-show="form.type.toString() !== '3'" label="外链菜单" prop="iframe">
              <el-radio-group v-model="form.is_link" size="mini">
                <el-radio-button label="1">是</el-radio-button>
                <el-radio-button label="2">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-show="form.type.toString() === '2'" label="菜单缓存" prop="cache">
              <el-radio-group v-model="form.is_cache" size="mini">
                <el-radio-button label="1">是</el-radio-button>
                <el-radio-button label="2">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-show="form.type.toString() !== '3'" label="菜单可见" prop="hidden">
              <el-radio-group v-model="form.is_show" size="mini">
                <el-radio-button label="1">是</el-radio-button>
                <el-radio-button label="2">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="form.is_link != 1 && form.type.toString() === '2'">
          <el-col :span="12">
            <el-form-item label="组件名称" prop="component_name">
              <el-input v-model="form.component_name" placeholder="组件名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件地址" prop="component_path">
              <el-input v-model="form.component_path" placeholder="组件地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="上级类目" prop="pid">
          <treeselect v-model="form.pid" :options="menuTree" style="width: 464px;" placeholder="选择上级类目" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect'
import crudMenu from '@/api/system/menu'
const defaultForm = {
  id: null,
  title: null,
  sort: 998,
  router: null,
  component_name: null,
  component_path: null,
  type: 2,
  pid: 0,
  is_link: 2,
  is_cache: 2,
  is_show: 1,
  icon: null,
  auth_sign: null
}
export default {
  name: 'Menu',
  components: { Treeselect, IconSelect },
  data() {
    return {
      menuData: [],
      loading: false,
      menuTree: [],
      formVisible: false,
      submitType: 'add',
      formStatus: {
        title: '新增菜单'
      },
      form: defaultForm,
      rules: {
        title: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        router: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.menuIni()
  },
  methods: {
    menuIni() {
      var that = this
      this.loading = true
      crudMenu.list().then(res => {
        that.menuData = res.data
        this.loading = false
      }).catch(res => {
        this.loading = false
      })
    },
    // 刷新表单
    refresh() {
      this.menuIni()
    },
    // 获取菜单树
    getMenuTree() {
      var that = this
      crudMenu.tree().then(res => {
        that.menuTree = []
        const menu = { id: 0, label: '顶级类目', children: [] }
        menu.children = res.data
        that.menuTree.push(menu)
      }).catch(res => {
        this.$notify({
          title: '请求失败！',
          type: 'error'
        })
      })
    },
    // 初始化表单
    iniForm(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      // 获取菜单树
      this.getMenuTree()
    },
    // 显示表单
    handleAdd(type) {
      this.submitType = 'add'
      this.formVisible = true
      this.iniForm('form')
      this.form = defaultForm
    },
    // 更新处理
    handleUpdate(data) {
      this.submitType = 'update'
      this.formVisible = true
      this.iniForm()
      this.form = JSON.parse(JSON.stringify(data))
    },
    handleDelete(row, $index) {
      crudMenu.del({ id: row.id }).then(res => {
        if (res.code === 0) {
          this.$notify({
            title: '操作完成！',
            type: 'success'
          })
        }
        this.refresh()
      }).catch(res => {
        this.$notify({
          title: '删除失败',
          type: 'error'
        })
      })
    },
    /**
     * 提交新增/编辑
     */
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.submitType === 'update') {
            crudMenu.edit(this.form).then(res => {
              this.$notify({
                title: '更新信息成功！',
                type: 'success'
              })
              this.refresh()
            })
          } else if (this.submitType === 'add') {
            crudMenu.add(this.form).then(res => {
              this.$notify({
                title: '新增成功！',
                type: 'success'
              })
              this.refresh()
            })
          }

          this.formVisible = false
        } else {
          this.$message({
            message: '数据校验失败',
            type: 'warning'
          })
          return false
        }
      })
    },
    // 选中图标
    selectedIcon(name) {
      this.form.icon = name
    }
  }
}
</script>
